<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :data="data"
      :option="option"
      :page.sync="page"
      @on-load="rowLoad"
      @search-change="searchChange"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @row-save="rowSave"
      @size-change="sizeChange"
      @current-change="currentChange"
      @expand-change="expandChanges"
    >
      <template slot="expand" slot-scope="{ row }">
        <template v-if="row.media">
          <div style="padding: 10px">
            <img
              width="100px"
              style="margin-right: 20px"
              v-for="(item, index) of JSON.parse(row.media)"
              :key="index"
              :src="item.previewUrl"
              @click="openPreview(index)"
            />
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无动态配图"></el-empty>
        </template>
      </template>
      <template slot="comment" slot-scope="{ row }">
        <el-button type="text" @click="onComment(row.id)">评论详情</el-button>
      </template>
    </avue-crud>
    <el-drawer title="评论详情" :visible.sync="drawer">
      <div class="demo-drawer__content" style="width: 100%">
        <div>
          <avue-comment
            v-for="(item, index) in commmentList"
            :key="index"
            :option="commentOption"
            :data="item"
          >
            <!-- <i class="el-icon-delete" @click="$message('自定义菜单')"></i> -->
            {{ item.createTime }}
          </avue-comment>
        </div>
      </div>
    </el-drawer>
    <!-- <el-drawer title="点赞人员" :visible.sync="drawer">
      <div class="demo-drawer__content" style="width: 100%">
        <div>
          <avue-comment
            v-for="(item, index) in commmentList"
            :key="index"
            :option="commentOption"
            :data="item"
          >
            {{ item.createTime }}
          </avue-comment>
        </div>
      </div>
    </el-drawer> -->
  </basic-container>
</template>

<script>
import avue from "@/mixins/avue.js";
import { baseUrl } from "@/config/env";
import { SE } from "@/common/constants.js";
import { trend_page, trend_delete, trend_schCommentPage } from "@/api/sns";

export default {
  mixins: [avue],
  data() {
    return {
      drawer: false,
      imgList: [],
      data: [],
      option: {
        expand: true,
        expandRowKeys: [1],
        rowKey: "id",
        addBtn: false,
        editBtn: false,
        span: 8,
        labelWidth: "100",
        column: [
          {
            label: "发布人",
            prop: "nickname",
            search: true,
          },
          {
            label: "标题",
            prop: "title",
            align: "left",
            search: true,
          },
          {
            label: "内容",
            prop: "content",
            align: "left",
            search: true,
          },
          {
            label: "评论",
            prop: "comment",
            slot: true,
          },
          {
            label: "发布时间",
            prop: "createTime",
          },
        ],
      },
      commmentList: [],
      commentOption: {
        props: {
          avatar: "avatar",
          author: "author",
          body: "content",
        },
      },
    };
  },
  created() {},
  methods: {
    onComment(e) {
      this.drawer = true;
      trend_schCommentPage({ trendId: e }).then((res) => {
        let result = this.$s.res(res);
        this.commmentList = result.records;
      });
    },
    expandChanges(row, expendList) {
      if (expendList.length) {
        this.option.expandRowKeys = [];
        if (row) {
          let a = [];
          if (row.media) {
            JSON.parse(row.media).forEach((element) => {
              a.push({
                url: element.previewUrl,
              });
            });
            this.imgList = a;
          }
          this.option.expandRowKeys.push(row.id);
        }
      } else {
        this.option.expandRowKeys = [];
      }
    },
    openPreview(index = 0) {
      this.$ImagePreview(this.imgList, index, {
        interval: 3000,
        closeOnClickModal: true,
        click: (data, index) => {
          // this.$message.success("点击事件" + index);
        },
        beforeClose: () => {
          // this.$message.success("关闭回调");
        },
      });
    },
    rowLoad() {
      trend_page(this.params).then((res) => {
        let result = this.$s.res(res);
        this.data = result.records;
        this.page.total = result.total;
      });
    },
    rowSave(row, loading, done) {
      card_add(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      // card_edit(row)
      //   .then((res) => {
      //     this.$s.suc(res);
      //   })
      //   .then(() => {
      //     this.rowLoad();
      //     done();
      //     loading();
      //   });
    },
    rowDel(row, index, done) {
      this.$confirm("确定数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          trend_delete({ id: row.id }).then((res) => {
            this.$s.suc(res);
          });
        })
        .then(() => {
          this.rowLoad();
          done();
        });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.demo-drawer__content {
  width: 100%;
  padding: 20px;
}
</style>
